<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Range</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Range</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-list-header>
            Range color
          </ion-list-header>
          <ion-item>
            <ion-range value="20"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range value="60" color="light"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range value="80" color="dark"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range pin="true" color="secondary" value="86">
              <ion-icon small name="ios-sunny" slot="start"></ion-icon>
              <ion-icon name="ios-sunny" slot="end"></ion-icon>
            </ion-range>
            <ion-range pin="true" color="danger" value="54">
              <ion-icon small name="ios-thermometer" slot="start"></ion-icon>
              <ion-icon name="ios-thermometer" slot="end"></ion-icon>
            </ion-range>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>
            Dynamic Value
          </ion-list-header>
          <ion-item>
            <ion-range pin="true" color="secondary" id="progressValue"></ion-range>
            <div id="progressValueResult" slot="end"></div>
          </ion-item>
          <ion-item>
            <ion-range pin="true" color="danger" id="brightnessValue"></ion-range>
            <div id="brightnessValueResult" slot="end"></div>
          </ion-item>
          <ion-item>
            <ion-range pin="true" color="dark" id="contrastValue"></ion-range>
            <div id="contrastValueResult" slot="end"></div>
          </ion-item>
          <ion-button onclick="increaseRangeValues()">
            Increase Values
          </ion-button>
        </ion-list>

        <ion-list>
          <ion-list-header>
            Mode
          </ion-list-header>
          <ion-item>
            <ion-range value="50" mode="md"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range value="50" mode="ios"></ion-range>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>
            Options
          </ion-list-header>
          <ion-item>
            <ion-range pin="true"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range min="-200" max="200" steps="10" snaps="true" pin="true"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range dual-knobs="true" id="multiKnob"></ion-range>
          </ion-item>
          <ion-item>
            <ion-range id="debounce" debounce="5000"></ion-range>
          </ion-item>
        </ion-list>

        <ion-button onclick="elTest()">Test</ion-button>
      </ion-content>

  </ion-app>

  <script>
    var ranges = ['progressValue', 'brightnessValue', 'contrastValue'];

    for (var i = 0; i < ranges.length; i++) {
      var el = document.getElementById(ranges[i]);
      el.value = (i + 1) * 10;
      updateRangeResult(el);

      el.addEventListener('ionChange', function(ev) {
        updateRangeResult(ev.currentTarget);
      });
    }

    function updateRangeResult(el) {
      var resultEl = document.getElementById(`${el.id}Result`);
      resultEl.innerHTML = el.value;
    }

    function increaseRangeValues() {
      for (var i = 0; i < ranges.length; i++) {
        var el = document.getElementById(ranges[i]);
        var newValue = el.value + 10;

        if (newValue > 100) {
          newValue = 10;
        }

        el.value = newValue;
      }
    }

    var knob = document.getElementById('multiKnob')
    var debounceRange = document.getElementById('debounce')
    knob.value = {
      lower: 33,
      upper: 60
    }
    knob.addEventListener('ionFocus', function(ev) {
      console.log('focus', ev)
    })
    knob.addEventListener('ionBlur', function(ev) {
      console.log('blur', ev)
    })
    knob.addEventListener('ionChange', function(ev) {
      console.log('change', ev)
    })
    debounceRange.addEventListener('ionChange', function(ev) {
      console.log('change', ev)
    })

    function elTest() {
      var range = document.getElementById('range');
      range.disabled = !range.disabled;
    }
  </script>
</body>

</html>
